<template>
  <!-- <s-layout class="live-streaming-wrap" title="开启直播" :bgStyle="{ color: '#000000' }" navbar="custom"> -->
  <!-- 直播预览区域 -->
  <view class="live-pusher-container">
    <live-pusher
      id="livePusher"
      style="width: 100%; height: 100vh"
      ref="livePusherRef"
      class="live-pusher"
      :url="pushUrl"
      :mode="mode"
      :beauty="beauty"
      :whiteness="whiteness"
      :aspect="aspect"
      :min-bitrate="minBitrate"
      :max-bitrate="maxBitrate"
      :audio-quality="audioQuality"
      :device-position="devicePosition"
      :enable-camera="enableCamera"
      :enable-mic="enableMic"
      :auto-focus="autoFocus"
      @statechange="onStateChange"
      @netstatus="onNetStatus"
      @error="onError"
    />

    <!-- 直播状态显示区域 -->
    <view class="live-status-bar">
      <view class="status-item">
        <text class="status-label">状态:</text>
        <text :class="['status-value', isLiving ? 'status-live' : '']">{{ liveStatus }}</text>
      </view>
    </view>

    <!-- 简化的控制面板 -->
    <view class="control-panel">
      <!-- 开始/停止直播按钮 -->
      <view :class="isLiving ? 'start-btn stop-btn' : 'start-btn'" @click="toggleLive">
        <text>{{ isLiving ? '结束直播' : '开始直播' }}</text>
      </view>
    </view>
  </view>
  <!-- </s-layout> -->
</template>

<script>
  import sheep from '@/sheep';

  export default {
    data() {
      return {
        // 直播推流器引用
        livePusherRef: null,
        // 直播推流器上下文
        livePusherContext: null,
        // 推流地址
        pushUrl: '',
        // 是否正在直播
        isLiving: false,
        // 直播状态文本
        liveStatus: '准备中...',
        // 网络状态信息
        netStatus: {},
        // 摄像头位置
        devicePosition: 'back',
        // 美颜级别
        beauty: 5,
        // 美白级别
        whiteness: 5,
        // 麦克风开关
        enableMic: true,
        // 摄像头开关
        enableCamera: true,
        // 自动对焦
        autoFocus: true,
        // 推流模式
        mode: 'HD',
        // 宽高比
        aspect: '9:16',
        // 最小码率
        minBitrate: 600,
        // 最大码率
        maxBitrate: 1500,
        // 音频质量
        audioQuality: 'high',
      };
    },

    // 生命周期钩子
    onLoad: async function () {
      // 获取推流地址
      const result = await this.getPushUrl();
      // 如果获取推流地址成功，初始化直播上下文
      if (result) {
        this.initLivePusherContext();
        // 延迟一小段时间后自动开始直播
        setTimeout(() => {
          this.startPush();
          // 显示自动开始直播的提示
          uni.showToast({
            title: '直播已自动开始',
            icon: 'none',
            duration: 2000
          });
        }, 500);
      }
    },

    mounted() {
      // 初始化直播推流器上下文（如果onLoad中未初始化）
      if (!this.livePusherContext) {
        this.initLivePusherContext();
      }
    },

    beforeDestroy() {
      // 确保结束直播
      if (this.isLiving) {
        this.stopPush();
      }
    },

    methods: {
      // 初始化直播推流器上下文
      initLivePusherContext() {
        // 创建推流上下文 - 需要传递this
        this.livePusherContext = uni.createLivePusherContext('livePusher', this);
      },

      // 获取推流地址
      async getPushUrl() {
        try {
          // 调用API获取推流地址
          const res = await sheep.$api.yy.liveAdd();
          console.log('🚀 ~ getPushUrl ~ res:', res);
          if (res.code === 1) {
            this.pushUrl = res.data.pushurl;
            return true;
          } else {
            sheep.$helper.toast(res.msg || '获取推流地址失败');
            return false;
          }
        } catch (error) {
          console.error('获取推流地址失败:', error);
          sheep.$helper.toast('获取推流地址失败');
          return false;
        }
      },

      // 开始推流
      startPush() {
        if (!this.pushUrl) {
          sheep.$helper.toast('推流地址不能为空');
          return false;
        }

        if (!this.livePusherContext) {
          this.initLivePusherContext();
        }

        this.livePusherContext.start({
          success: () => {
            this.isLiving = true;
            this.liveStatus = '直播中';
            sheep.$helper.toast('直播已开始');
          },
          fail: (error) => {
            console.error('开始推流失败:', error);
            sheep.$helper.toast('开始推流失败');
          },
        });
      },

      // 停止推流
      stopPush() {
        if (!this.livePusherContext) return;

        this.livePusherContext.stop({
          success: () => {
            this.isLiving = false;
            this.liveStatus = '已结束';
            sheep.$helper.toast('直播已结束');
          },
          fail: (error) => {
            console.error('停止推流失败:', error);
            sheep.$helper.toast('停止推流失败');
          },
        });
      },

      // 切换直播状态
      toggleLive() {
        if (this.isLiving) {
          // 确认是否结束直播
          uni.showModal({
            title: '提示',
            content: '确定要结束直播吗？',
            success: (res) => {
              if (res.confirm) {
                this.stopPush();
              }
            },
          });
        } else {
          this.startPush();
        }
      },

      // 直播状态变化事件
      onStateChange(e) {
        console.log('推流状态变化:', JSON.stringify(e.detail));
        const { code } = e.detail;

        // 只处理关键状态变化
        switch (code) {
          case 1001: // 已经连接推流服务器
            console.log('已经连接推流服务器');
            this.liveStatus = '已连接';
            break;
          case 1002: // 已经与服务器握手完毕
            console.log('已经与服务器握手完毕,开始推流');
            this.liveStatus = '直播中';
            break;
          case 1003: // 打开摄像头成功
            console.log('打开摄像头成功');
            break;
          case 1004: // 录屏启动成功
            console.log('录屏启动成功');
            break;
          case 1005: // 推流动态调整分辨率
            console.log('推流动态调整分辨率');
            break;
          case 1006: // 推流动态调整码率
            console.log('推流动态调整码率');
            break;
          case 1007: // 首帧画面采集完成
            console.log('首帧画面采集完成');
            break;
          case 1008: // 编码器启动
            console.log('编码器启动');
            break;
          case 3001: // RTMP -DNS解析失败
            console.log('RTMP -DNS解析失败');
            this.liveStatus = 'DNS解析失败';
            break;
          case 3002: // RTMP服务器连接失败
            console.log('RTMP服务器连接失败');
            this.liveStatus = '服务器连接失败';
            break;
          case 3003: // RTMP服务器握手失败
            console.log('RTMP服务器握手失败');
            this.liveStatus = '服务器握手失败';
            break;
          case 3004: // RTMP服务器主动断开，请检查推流地址的合法性或防盗链有效期
            console.log('RTMP服务器主动断开');
            this.liveStatus = '服务器断开';
            break;
          case 3005: // RTMP 读/写失败
            console.log('RTMP 读/写失败');
            this.liveStatus = '读写失败';
            break;
          case 1101: // 网络状况不佳：上行带宽太小，上传数据受阻
            console.log('网络状况不佳：上行带宽太小，上传数据受阻');
            this.liveStatus = '网络不佳';
            break;
          case 1102: // 网络断连, 已启动自动重连
            console.log('网络断连, 已启动自动重连');
            this.liveStatus = '重连中...';
            break;
          case 1103: // 硬编码启动失败,采用软编码
            console.log('硬编码启动失败,采用软编码');
            break;
          case 1104: // 视频编码失败
            console.log('视频编码失败');
            this.liveStatus = '编码失败';
            break;
          case 1105: // 新美颜软编码启动失败，采用老的软编码
            console.log('新美颜软编码启动失败，采用老的软编码');
            break;
          case 1106: // 新美颜软编码启动失败，采用老的软编码
            console.log('新美颜软编码启动失败，采用老的软编码');
            break;
          case 3006: // RTMP 断开，等待重连
            console.log('RTMP 断开，等待重连');
            this.liveStatus = '等待重连';
            break;
          case 3007: // RTMP 重连中...
            console.log('RTMP 重连中...');
            this.liveStatus = 'RTMP重连中';
            break;
          case 3008: // RTMP 重连成功
            console.log('RTMP 重连成功');
            this.liveStatus = '直播中';
            break;
          case 3009: // RTMP 重连失败
            console.log('RTMP 重连失败');
            this.liveStatus = '重连失败';
            break;
          case 3010: // 连接不到服务器，请检查网络状态
            console.log('连接不到服务器，请检查网络状态');
            this.liveStatus = '无法连接服务器';
            break;
          case -1301: // 打开摄像头失败
            console.log('打开摄像头失败');
            sheep.$helper.toast('打开摄像头失败');
            this.liveStatus = '摄像头失败';
            break;
          case -1302: // 打开麦克风失败
            console.log('打开麦克风失败');
            sheep.$helper.toast('打开麦克风失败');
            this.liveStatus = '麦克风失败';
            break;
          case -1303: // 视频编码失败
            console.log('视频编码失败');
            this.liveStatus = '视频编码失败';
            break;
          case -1304: // 音频编码失败
            console.log('音频编码失败');
            this.liveStatus = '音频编码失败';
            break;
          case -1305: // 不支持的视频分辨率
            console.log('不支持的视频分辨率');
            this.liveStatus = '分辨率不支持';
            break;
          case -1306: // 不支持的音频采样率
            console.log('不支持的音频采样率');
            this.liveStatus = '采样率不支持';
            break;
          case -1307: // 网络断连，且经多次重连抢救无效，更多重试请自行重启推流
            console.log('网络断连，且经多次重连抢救无效，更多重试请自行重启推流');
            sheep.$helper.toast('网络断连，请检查网络后重试');
            this.liveStatus = '网络断连';
            break;
          case -1308: // 开始录屏失败，可能是被用户拒绝
            console.log('开始录屏失败，可能是被用户拒绝');
            this.liveStatus = '录屏失败';
            break;
          case -1309: // 录屏失败，不支持的Android系统版本，需要5.0以上的系统
            console.log('录屏失败，不支持的Android系统版本，需要5.0以上的系统');
            this.liveStatus = '系统版本过低';
            break;
          case -1310: // 录屏被其他应用打断了
            console.log('录屏被其他应用打断了');
            this.liveStatus = '录屏被打断';
            break;
          case -1311: // Android Mic打开成功，但是录不到音频数据
            console.log('Android Mic打开成功，但是录不到音频数据');
            this.liveStatus = '无音频数据';
            break;
          case -1312: // 录屏动态切横竖屏失败
            console.log('录屏动态切横竖屏失败');
            this.liveStatus = '切屏失败';
            break;
          case 1201: // 网络状态正常
            console.log('网络状态正常');
            this.liveStatus = '直播中';
            break;
          case 1202: // 网络状态不佳
            console.log('网络状态不佳');
            this.liveStatus = '网络不佳';
            break;
          case 1203: // 网络状态差
            console.log('网络状态差');
            this.liveStatus = '网络状态差';
            break;
          default:
            console.log('未知状态码:', code);
            break;
        }
      },

      // 网络状态监控
      onNetStatus(e) {
        this.netStatus = e.detail;
        // 打印网络状态信息
        console.log('直播网络状态:', JSON.stringify(this.netStatus));

        // 打印关键网络指标
        if (this.netStatus) {
          const { videoBitrate, audioBitrate, videoFPS, netSpeed } = this.netStatus;
          console.log(`视频码率: ${videoBitrate}kbps, 音频码率: ${audioBitrate}kbps, 帧率: ${videoFPS}fps, 网速: ${netSpeed}KB/s`);
        }
      },

      // 错误处理
      onError(e) {
        console.error('推流错误:', JSON.stringify(e.detail));
        const { errCode, errMsg } = e.detail;

        // 更新直播状态
        this.liveStatus = `错误(${errCode})`;

        // 显示错误提示
        sheep.$helper.toast(`直播出错: ${errMsg || '未知错误'}`);

        // 严重错误时自动停止推流
        if ([10001, 10002, 10003, 10004].includes(errCode)) {
          console.log('检测到严重错误，自动停止推流');
          this.stopPush();
        }
      },
    },
  };
</script>

<style lang="scss" scoped>
  .live-streaming-wrap {
    background-color: #000;
    height: 100vh;
    width: 100%;
    position: relative;
    overflow: hidden;
  }

  .live-pusher-container {
    position: relative;
    width: 100%;
    height: 100vh;
  }

  .live-pusher {
    width: 100%;
    height: 100%;
  }

  /* 直播状态栏 */
  .live-status-bar {
    position: absolute;
    top: 100rpx;
    left: 0;
    right: 0;
    display: flex;
    padding: 20rpx 30rpx;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10;

    .status-item {
      display: flex;
      align-items: center;
      margin-right: 30rpx;

      .status-label {
        font-size: 24rpx;
        color: #ffffff;
        margin-right: 10rpx;
      }

      .status-value {
        font-size: 24rpx;
        color: #ffffff;
      }

      .status-live {
        color: #ff4d4f;
      }
    }
  }

  /* 控制面板 */
  .control-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 30rpx;
    z-index: 10;
  }

  /* 美颜控制 */
  .control-group {
    margin-bottom: 30rpx;

    .control-item {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;

      .control-label {
        width: 80rpx;
        font-size: 28rpx;
        color: #ffffff;
      }

      .control-slider {
        flex: 1;
      }
    }
  }

  /* 功能按钮组 */
  .button-group {
    display: flex;
    justify-content: space-around;
    margin-bottom: 30rpx;

    .control-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20rpx;

      .iconfont {
        font-size: 48rpx;
        color: #ffffff;
        margin-bottom: 10rpx;
      }

      .btn-text {
        font-size: 24rpx;
        color: #ffffff;
      }
    }
  }

  /* 清晰度选择器 */
  .quality-selector {
    margin-bottom: 30rpx;

    .selector-label {
      font-size: 28rpx;
      color: #ffffff;
      margin-bottom: 20rpx;
      display: block;
    }

    .radio-group {
      display: flex;
      flex-wrap: wrap;

      .radio-item {
        margin-right: 30rpx;
        display: flex;
        align-items: center;

        .radio-text {
          font-size: 28rpx;
          color: #ffffff;
          margin-left: 10rpx;
        }
      }
    }
  }

  /* 开始/停止直播按钮 */
  .start-btn {
    width: 80%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    background: linear-gradient(135deg, #36d1dc 0%, #5b86e5 100%);
    color: #ffffff;
    font-size: 32rpx;
    border-radius: 40rpx;
    margin: 0 auto;
    box-shadow: 0 10rpx 20rpx rgba(54, 209, 220, 0.3);
  }

  .stop-btn {
    background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
    box-shadow: 0 10rpx 20rpx rgba(255, 65, 108, 0.3);
  }

  // /* 图标字体 */
  // @font-face {
  //   font-family: 'iconfont';
  //   src: url('data:font/woff2;charset=utf-8;base64,d09GMgABAAAAAAXMAAsAAAAACwQAAAV+AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDMgqJCIdiATYCJAMUCwwABCAFhGcHSRvSCREVpFGR/UiwbSGPxFBMJJFEYmxMUYiF6IfH035f7s4+wRPUWr/d3fcHsQCJRLMkmkcqiURIJNIkQoVE6IQO9f9f0/4PcDEuYFUhK6yqKmRFVEQVhYzKKnJWVaXOqtxVuauQVbinz7b+bHcC2iwi63H0I7eR3ESuEbkJceN5E2iaNBRrb1/YBHYKNAvEXcFMYJcipYQe6oXKwdKCeAZVPT1KzwN4Gn1//EcujCRVZl70/sOzBRT+An/5RRYt/r+4sTsA6/FMsJXImAMoxHVh6DWcAM0xTJpKvnAJaOpJ/AJ/efzl1y+y/v9PdoxHWk/SP54lUYgGUW8ztjhZfAFRJfkFJlXyCwKqJL8QoYryCxGqJL+IQBXzCwHVVLtRDWWdxDaQJ4D4DkBuQa/qJZJUVVTlRJQkUbTb7ZIrXsLBcFyRqEZHOxyxkRGHI+5wREdGRjnDDvfQUKzDER0eHuWIRjXGRJgYG+/+cjDcj5hxo8aNjY2ZMGHMuLFjxo8ZM378mAkTxo4fP2ZiZMy4caPHjxs9IcKMGzNq/NjRE8eOmjB+9KQJoydOGDVpwqhJk0ZNnjxqypRRU6eOmjZt1PTpMbNmxc6eHTtnTuzcuXHz5sXNnx+3YEH8woXxixbFL14cv2RJ/NKl8cuWxS9fHr9iRfzKlfGrVsWvXh2/Zk382rXx69bFr18fv2FD/MaNiZs2JW7enLhlS+LWrYnbtiVu3564Y0fijh1JO3cm7dqVtHt30p49SXv3Ju3bl7R/f9KBA0kHDyYdOpR0+HDSkSNJR48mHTuWdPx40okTSSdPJp06lXT6dNKZM0lnzyade5R07nHSuSdJ554mnX+WdOF50sUXSZdeJl1+lXTlddLVN0nX3iZdf5d0433SzQ9Jtz4m3f6UdOdz0t0vSfe+Jt3/lvTge9LD4VuPRmw9Hrn1ZNTW01Fbz0ZvPR+z9WLs1stxW6/Gb72esPVm4tbbyVvvpmwdnrp1eNrW4elb7+m0e/fS7t9Pe/Ag7eHDtEeP0h4/Tnv6NO3Zs7Tnz9NevEh7+TLt1au0N2/S3r5Ne/cu7f37tA8f0j5+TPv0Ke3z57QvX9K+fk379i3t+/e0Hz/Sfv5M+/Ur7ffvtD9/0v7+Tfv3L10AyNixI3PXrszdu7P27MnatStr+/asrVuzNm/O2rgxa/36rLVrs1avzlq5MmvFiqxly7KWLMlauDBr/vysuXOzZs/OmjEja9q0rClTsiZPzpo0KWv8+KyxY7NGj84aMSJr2LCs3r2zevbM6t49q0uXrE6dstq3z2rTJqtVq6zmzbOaNMlq2DCrXr2sOnWyatXKqlEjq1q1rMqVsypUyCpXLqtMmaxSpbKKF88qUiSrcOGsggWz8ufPypMnK3furJw5s7Jnz8qaNStLlqzMmTMzZcrMkCEzffr/APWFJPWYemCBAAAAAElFTkSuQmCC')
  //     format('woff2');
  // }

  .iconfont {
    font-family: 'iconfont' !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  // .icon-camera-switch:before {
  //   content: '\e8d0';
  // }

  // .icon-flash-on:before {
  //   content: '\e8d9';
  // }

  // .icon-flash-off:before {
  //   content: '\e8da';
  // }

  // .icon-mic:before {
  //   content: '\e8e0';
  // }

  // .icon-mic-off:before {
  //   content: '\e8e1';
  // }
</style>
